<template>
  <div>
    <!-- 返回 -->
    <van-nav-bar
      title="内容"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #right>
        <van-cell title="分享" @click="showShare = true" />
        <van-share-sheet
          v-model="showShare"
          title="立即分享给好友"
          :options="options"
          @select="onSelect"
        />
      </template>
    </van-nav-bar>
    <!-- 轮播 -->
    <van-swipe class="my-swipe" :autoplay="6000" show-indicators="false">
      <van-swipe-item v-for="item in info.imgs" :key="item.i">
        <img :src="item" alt="" class="infoimg" />
      </van-swipe-item>
    </van-swipe>
    <div class="flexinfo">
        <div class="leftinfo">
            <img :src=info.avator alt="">
            <span>{{info.uname}}</span>
        </div>
        <div class="rightinfo">
            <p> + 关注</p>
        </div>
    </div>
    <hr>
    <div class="text">
        <div class="tips">
            <small>{{info.time}}</small>
            <strong>{{info.like}}赞 {{info.collect}}收藏</strong>
        </div>
        <p class="desc">{{info.desc}}</p>
        <span>发布于{{info.adress}}</span><br/>
        

    </div>

  </div>
</template>

<script>
// import BUS from '../../../router/BUS'
export default {
  data() {
    return {
        showShare: false,
        options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
      ],
        info: [],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("/");
    },
     onSelect() {
    //   Toast(option.name);
      this.showShare = false;
    },
  },
  created() {
    console.log(111);
    this.info = JSON.parse(localStorage.getItem("info"));
    //   BUS.$on('info',(item)=>{
    //             // console.log(item)
    //             this.info=Object.assign({},item)
    //             console.log(this.info)
    //         })
  },
};
</script>

<style lang="less" scoped>
.my-swipe {
  .van-swipe-item {
    height: 380px;
    overflow: hidden;
    .infoimg {
      width: 100%;
      // overflow: hidden;
    }
  }
}
.flexinfo{
    display: flex;
    justify-content: space-between;
    width: 100%;
    // height: 46px;
    
    .leftinfo{
        img{
            width: 34px;
            margin:0 10px;
            border-radius: 50%;
            vertical-align:middle;
        }
    }
    .rightinfo{
        margin: -10px 10px;
        color: #ff2741;
        padding: 0;
        p{
            border: 1px solid #ff2741;
            padding: 5px 10px;

        }
    }
}
.text{
    padding: 2px 8px;
    line-height: 22px;
    span{
        color: #a9a9a9;
    }
}
.tips{
    color: #a9a9a9;
    display: flex;
    justify-content: space-between;
}
</style>